<extend name="Public/base" />

<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>报表</h2>
    </div>
    <div class="cf">
        <!-- 高级搜索 -->
        <div class="search-form fr cf">
            <div class="sleft">
                <input type="text" name="date" class="text input-large time" value="{:I('date')}" placeholder="报表日期">
                <a class="sch-btn" href="javascript:;" id="search" url="{:U('month')}"><i class="btn-search"></i></a>
            </div>
        </div>
    </div>
    
<div id="container" style="min-width:400px;height:400px"></div>
</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
	<script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.5/lodash.min.js"></script>
<link href="__STATIC__/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
<php>if(C('COLOR_STYLE')=='blue_color') echo '<link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">';</php>
<link href="__STATIC__/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript">
    var url = "{:U('month_report',array('date'=>$date))}";
    function getTimeSegName(intType){
		return ["","峰值","股值","平值"][intType] || "未知类型";
		
    }
    var type="{$type}";
    $(function(){
        $('.time').datetimepicker({
            format: 'yyyy-mm',
            language:"zh-CN",
            minView:'year',
            startView:'year',
            autoclose:true,
        });
        //showTab();
    });
    
    $.ajax({
    	url:url,
    	success: function(json){
    		var series = [];
    		var categories = [];
    		var charData = _.groupBy(json,function(obj){return obj["memter_name"]});
    		categories = _.keys(charData);
			var map = {};
    		for(var i = 0;i<categories.length;i++ ){
    			_.forEach(charData[categories[i]],function(o){
   					var tz = o["start_time"] + "-" + o["end_time"];
   					if(type==="1"){
   						tz = getTimeSegName(o["type"]);
   					}
   					if(!map[tz]){
   						map[tz] = new Array(categories.length);
   						for(var k=0;k<categories.length;k++){
   							map[tz][k] = 0;
   						}
   					}
   					map[tz][i] = parseFloat(o["use_elect"]);
    			});
    		}
    		for (var key in map) {  
    			series.push({name:key,data:map[key]});  
            }
    		$(function () {
    		    $('#container').highcharts({
    		        chart: {
    		            type: 'bar'
    		        },
    		        title: {
    		            text: '月报（{$date}）'
    		        },
    		        subtitle: {
    		            text: '数据来源: 月报数据'
    		        },
    		        xAxis: {
    		            categories:categories,
    		            title: {
    		                text: "电表"
    		            }
    		        },
    		        yAxis: {
    		            min: 0,
    		            title: {
    		                text: '使用电量 (千瓦时)',
    		                align: 'high'
    		            },
    		            labels: {
    		                overflow: 'justify'
    		            }
    		        },
    		        tooltip: {
    		            valueSuffix: ' 千瓦时'
    		        },
    		        plotOptions: {
    		            bar: {
    		                dataLabels: {
    		                    enabled: true,
    		                    allowOverlap: true
    		                }
    		            }
    		        },
    		        legend: {
    		            layout: 'horizontal',
    		            floating: false,
    		            borderWidth: 1,
    		            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    		            shadow: false
    		        },
    		        credits: {
    		            enabled: false
    		        },
    		        series:series
    		    });
    		});

          }
    	});
    
        //搜索功能
        $("#search").click(function(){
            var url = $(this).attr('url');
				if(type==="1"){
					url = "{:U('monthEx')}";
				}
            var query  = $('.search-form').find('input').serialize();
            query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
            query = query.replace(/^&/g,'');
            if( url.indexOf('?')>0 ){
                url += '&' + query;
            }else{
                url += '?' + query;
            }
            window.location.href = url;
        });
        //回车搜索
        $(".search-input").keyup(function(e){
            if(e.keyCode === 13){
                $("#search").click();
                return false;
            }
        });
        //导航高亮
        highlight_subnav('{:U('index')}');
        var chart = null;
     // 获取 CSV 数据并初始化图表
   Highcharts.setOptions({
    global: {
        useUTC: false
    }
});


        
    </script>
</block>
